<template>
  <div id="meQrcode" :title="qrText" :title2="qr2Text">
    <div class="qrcode_box">
      <img class="qrcode_canvas" id="qrcode_canvas" ref="qrcode_canvas" alt="二维码" />
      <img v-if="qrLogo" class="qrcode_logo" ref="qrcode_logo" :src="qrLogo" alt="logo" />
      <canvas :width="qrSize" :height="qrSize" class="canvas" ref="canvas" id="canvas"></canvas>
      <div style="text-align: center;">
        <el-button round size="small" @click="savePic">保存图片</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import QRCode from "qrcode";
import logo from "@/assets/logo.png";
export default {
  props: {
    //二维码存储内容
    qrUrl: {
      type: String,
      default: "你不配"
    },
    //二维码尺寸（正方形 长宽相同）
    qrSize: {
      type: Number,
      default: 300
    },
    //二维码底部文字
    qrText: {
      default: ""
    },
    qr2Text: {
      default: ""
    },
    //二维码中部logo 如果写default: ""则不生成logo
    qrLogo: {
      type: String,
      default: ''
    },
    //logo尺寸（正方形 长宽相同）
    qrLogoSize: {
      type: Number,
      default: 40
    },
    //底部说明文字字号
    qrTextSize: {
      type: Number,
      default: 14
    }
  },
  data() {
    return {
      num:1
    };
  },
  methods: {
    /**
     * @argument qrUrl        二维码内容
     * @argument qrSize       二维码大小
     * @argument qrText       二维码中间显示文字
     * @argument qr2Text       二维码头部显示文字
     * @argument qrTextSize   二维码中间显示文字大小(默认16px)
     * @argument qrLogo       二维码中间显示图片
     * @argument qrLogoSize   二维码中间显示图片大小(默认为80)
     */
    handleQrcodeToDataUrl() {
      let qrcode_canvas = this.$refs.qrcode_canvas;
      let qrcode_logo = this.$refs.qrcode_logo;
      let canvas = this.$refs.canvas;
      const that = this;
      QRCode.toDataURL(
          this.qrUrl,
          { errorCorrectionLevel: "H" },
          (err, url) => {
            qrcode_canvas.src = url;
            // 画二维码里的logo// 在canvas里进行拼接
            let ctx = canvas.getContext("2d");
            setTimeout(() => {
              //获取图片
              ctx.drawImage(qrcode_canvas, 0, 0, that.qrSize, that.qrSize);
              if (that.qrLogo) {
                //设置logo大小
                //设置获取的logo将其变为圆角以及添加白色背景
                // ctx.fillStyle = "#fff";
                // ctx.beginPath();
                // let logoPosition = (that.qrSize - that.qrLogoSize) / 2; //logo相对于canvas居中定位
                // let h = that.qrLogoSize + 10; //圆角高 10为基数(logo四周白色背景为10/2)
                // let w = that.qrLogoSize + 10; //圆角宽
                // let x = logoPosition - 5;
                // let y = logoPosition - 5;
                // let r = 5; //圆角半径
                // ctx.moveTo(x + r, y);
                // ctx.arcTo(x + w, y, x + w, y + h, r);
                // ctx.arcTo(x + w, y + h, x, y + h, r);
                // ctx.arcTo(x, y + h, x, y, r);
                // ctx.arcTo(x, y, x + w, y, r);
                // ctx.closePath();
                // ctx.fill(); qrcode_logo.onload = function () {
                //     ctx.drawImage(
                //         qrcode_logo,
                //         logoPosition,
                //         logoPosition,
                //         that.qrLogoSize,
                //         that.qrLogoSize
                //     );
                // }


                const image = new Image();
                image.src = this.qrLogo;
                image.onload = () => {
                  image.width = 40
                  image.height = 40
                  const x = (canvas.width - image.width) / 2;
                  const y = (canvas.height - image.height) / 2;

                  ctx.drawImage(image, x, y,40,40);
                }

              }
              if (that.qrText) {
                //设置字体
                let fpadd = 10; //规定内间距
                ctx.font = "bold " + that.qrTextSize + "px Arial";
                let tw = ctx.measureText(that.qrText).width; //文字真实宽度
                let ftop = that.qrSize - that.qrTextSize; //根据字体大小计算文字top
                let fleft = (that.qrSize - tw) / 2; //根据字体大小计算文字left
                let tp = that.qrTextSize / 2; //字体边距为字体大小的一半可以自己设置
                ctx.fillStyle = "#fff";
                ctx.fillRect(
                    fleft - tp / 2,
                    ftop - tp / 2,
                    tw + tp,
                    that.qrTextSize + tp
                );
                ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
                ctx.fillStyle = "#ff0000";
                ctx.fillText(that.qrText, fleft, ftop);
              }
              if (that.qr2Text) {
                //设置字体
                let fpadd = 10; //规定内间距
                ctx.font = "bold " + that.qrTextSize + "px Arial";
                let tw = ctx.measureText(that.qr2Text).width; //文字真实宽度
                let ftop = 0; //根据字体大小计算文字top
                let fleft = (that.qrSize - tw) / 2; //根据字体大小计算文字left
                let tp = that.qrTextSize / 2; //字体边距为字体大小的一半可以自己设置
                ctx.fillStyle = "#fff";
                ctx.fillRect(
                    fleft - tp / 2,
                    ftop - tp / 2,
                    tw + tp,
                    that.qrTextSize + tp
                );
                ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
                ctx.fillStyle = "#333";

                //字体大小
                // ctx.font = "bold " + 50 + "px Arial";
                //颜色
                ctx.fillStyle = "#ff0000";

                ctx.fillText(that.qr2Text, fleft, ftop);
              }
              qrcode_canvas.src = canvas.toDataURL();
            }, 0);
          }
      );

    },
    //保存图片
    savePic() {

      const downloadImage = () => {
        const a = document.createElement("a")
        // 将二维码面板处理为图片
        a.href = this.$refs.canvas.toDataURL("image/png", 0.5)
        a.download = this.qr2Text + ".png"
        a.click()
        this.$message.success("图片下载成功！")
      }

      if (this.num === 1) {
        setTimeout(() => {
          downloadImage()
        }, 1000)
      } else {
        downloadImage()
      }
      this.num++
    },
  },
  mounted() {
    this.handleQrcodeToDataUrl();
  },
  updated() {
    this.handleQrcodeToDataUrl();
  },
};
</script>
<style scoped>
.qrcode_box,
#meQrcode {
  display: inline-block;
}

.qrcode_box img {
  display: none;
}
</style>
